<template>
    <div id="choiceModel">
            <div class="select-main"  >
                    <div class="select-title">筛选
                <div class="clean"><button class="clean-btn" @click="cleanSelect">清空条件</button></div>
                </div>
                <div class="select-sub"><div class="select-sub-name col-sm-6">均价范围</div><div class="select-result" @click="priceVisible=true"><span class="select-result-text">{{price.label}}</span><i class="fa fa-angle-right" aria-hidden="true"></i></div></div>
                <div class="select-sub"><div class="select-sub-name col-sm-6">物业类型</div><div class="select-result" @click="propertyVisible=true"><span class="select-result-text">{{property.label}}</span><i class="fa fa-angle-right" aria-hidden="true"></i></div></div>
                <div class="select-confirm"><button class="select-confirm-btn" @click="completeSelect">确定</button></div>


                <mt-popup v-model="priceVisible" position="bottom" class="mint-popup mint-datetime mint-popup-bottom">
                    <div class="picker-toolbar">
                        <div class="mint-datetime-action left"  @click="priceVisible=false">取消</div>
                        <div class="mint-datetime-action left" style="width:20%" @click="completePrice">确定</div>
                    </div>
                    <mt-picker :slots="priceSlots" value-key="label" @change="priceChange" ref="pricePicker" ></mt-picker>
                </mt-popup>
                <mt-popup v-model="propertyVisible" position="bottom" class="mint-popup mint-datetime mint-popup-bottom">
                    <div class="picker-toolbar">
                        <div class="mint-datetime-action  left"  @click="propertyVisible=false">取消</div>
                        <div class="mint-datetime-action left" style="width:20%" @click="completeProperty">确定</div>
                    </div>
                    <mt-picker :slots="propertySlots" value-key="label" @change="propertyChange" ref="propertyPicker"></mt-picker>
                </mt-popup>
            </div>
            <div class="dialog-cover" @click="hideThis"></div>
    </div>
</template>

<script>
    import {Picker}  from "mint-ui";
    const handler = function(e) {
            e.preventDefault();
    }
    export default {
        components: {Picker },
        name: "select",
        watch: {

        },
        data(){
            return{
                priceSlots:[{defaultIndex:0,values:[{ label: "不限", value: "" },
                    { label: "1万以下", value: "<=10000" },
                    { label: "1-2万", value: "10000-20000" },
                    { label: "2-3万", value: "20000-30000" },
                    { label: "3-4万", value: "30000-40000" },
                    { label: "4-5万", value: "40000-50000" },
                    { label: "5-8万", value: "50000-80000" },
                    { label: "8-10万", value: "80000-100000" },
                    { label: "10-15万", value: "100000-150000" },
                    { label: "15万以上", value: ">150000" }]}],
                propertySlots:[],
                priceVisible:false,
                propertyVisible:false,
                price:{label:'不限',value:''},
                priceTmp:{label:'',value:''},
                property:{label:'全部',value:''},
                propertyTmp:{label:'',value:''}
            }
        },
        methods:{
            initEstateTypeEnums: function() {
                var _self = this;
                var body = {};
                body.params = {};
                var url = this.utilHelper.apiUrl + "/common/getEnum/EstateTypeEnum";
                var values = [{label:"全部",value:""}]
                _self.$http.get(url, body).then(response => {
                    var body = response.body.data;
                    Object.keys(body).forEach(function(key) {
                        var estateType = {};
                        estateType.label = body[key];
                        estateType.value = key;
                        values.push(estateType);
                    });
                    _self.propertySlots.push({values:values});
                });
            },
            show(){
                $("#choiceModel").show();
            },
            hideThis(){
                $("#choiceModel").hide();
            },
            completePrice(){
                this.price ={label:this.priceTmp.label,value:this.priceTmp.value}
                this.priceVisible = false;
            },
            completeProperty(){
                this.property ={label:this.propertyTmp.label,value:this.propertyTmp.value}
                this.propertyVisible = false;
            },
            priceChange(picker, values){
                if (values && values[0]) {
                    this.priceTmp ={label:values[0].label,value:values[0].value}
                }
            },
            propertyChange(picker, values){
                if(values && values[0]) {
                    this.propertyTmp ={label:values[0].label,value:values[0].value}
                }
            },
            completeSelect(){
                var params={price:this.price.value,property:this.property.value}
                this.$emit("getPremises",params);
            },
            cleanSelect(){
                this.price={label:'不限',value:''};
                this.priceTmp={label:'',value:''};
                this.property={label:'全部',value:''};
                this.propertyTmp={label:'',value:''};
                this.priceSlots[0].defaultIndex = 0;
                this.propertySlots[0].defaultIndex = 0;
                this.$refs.pricePicker.setSlotValue(0,'');
                this.$refs.propertyPicker.setSlotValue(0,'');
                this.$refs.params.estateType="";
            }

        },
        mounted(){
            this.initEstateTypeEnums();
        }
    }
</script>

<style scoped>
    .dialog-cover{position: fixed;left: 0;right: 0;top: 0;bottom: 0;}
    .dialog-cover{background: #000;opacity: .3;z-index:60; }
    .select-main{position: fixed;right: 0;top: 0;bottom: 0;background-color: #fff;z-index: 66;width: 80%;z-index: 1000;}
    .select-title{text-align: center;position: relative;height: 60px;line-height: 60px;border-bottom:1px solid #ccc;font-size: 16px;}
    .clean{position: absolute;right: 10px;top:0;}
    .clean-btn{background: none;border:1px solid #f08c45;color:#f08c45;border-radius: 5px;padding:3px;}
    .select-sub{height: 40px;line-height: 40px;font-size:16px;border-bottom:1px solid #ccc;padding: 0 10px;}
    .select-result{text-align: right;}
    .select-sub-name{text-align: left;}
    .select-result-text{color:#f08c45}
    .select-confirm{position:fixed;bottom: 0;right:0;height: 40px;line-height: 40px;width: 80%;text-align: center;}
    .select-confirm-btn{width: 90%;height: 35px;line-height: 35px;background: #f08c45;color:#fff;}
</style>